From f51b15808a89b045c8ff9f233f37b8799accc99a Mon Sep 17 00:00:00 2001 From: Benjamin Otte Date: Sun, 27 Mar 2016 19:41:19 +0200 Subject: [PATCH] theme: Split out _solid() function The function creates a solid color image. Currently this is done with linear-gradient(). --- gtk/theme/Adwaita/_common.scss | 20 ++++++------ gtk/theme/Adwaita/_drawing.scss | 29 ++++++++++------- gtk/theme/Adwaita/gtk-contained-dark.css | 32 +++++++++---------- gtk/theme/Adwaita/gtk-contained.css | 32 +++++++++---------- gtk/theme/HighContrast/_common.scss | 12 +++---- gtk/theme/HighContrast/_drawing.scss | 11 +++++-- .../HighContrast/gtk-contained-inverse.css | 2 +- gtk/theme/HighContrast/gtk-contained.css | 2 +- 8 files changed, 75 insertions(+), 65 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index e262db53cc..43cfbc1d03 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -123,7 +123,7 @@ textview { textview border { background-color: mix($bg_color, $base_color, 50%); - background-image: image(transparentize(black, 0.8)); // HACK: the border node just draws background so, + background-image: _solid(transparentize(black, 0.8)); // HACK: the border node just draws background so, background-repeat: no-repeat; // using a background-image to draw the border &:backdrop { background-color: mix($backdrop_bg_color, $backdrop_base_color, 50%); } @@ -1479,7 +1479,7 @@ headerbar { .selection-menu { &:backdrop, & { border-color: transparentize($selected_bg_color, 1); - background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1)); + background-image: _solid(transparentize($selected_bg_color, 1)); box-shadow: none; padding-left: 10px; padding-right: 10px; @@ -3024,7 +3024,7 @@ scale { min-width: 0; trough { - background-image: linear-gradient(to top, $borders_color); + background-image: _solid($borders_color); background-repeat: no-repeat; } @@ -3746,7 +3746,7 @@ placessidebar { &.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; - background-image: image($drop_target_color); + background-image: _solid($drop_target_color); background-clip: content-box; } @@ -3797,24 +3797,24 @@ paned { border-style: none; // just to be sure background-color: transparent; // workaround, using background istead of a border since the border will get rendered twice (?) - background-image: image($borders_color); + background-image: _solid($borders_color); background-size: 1px 1px; - &:selected { background-image: image($selected_bg_color); } // FIXME is this needed? + &:selected { background-image: _solid($selected_bg_color); } // FIXME is this needed? - &:backdrop { background-image: image($backdrop_borders_color); } + &:backdrop { background-image: _solid($backdrop_borders_color); } &.wide { min-width: 5px; min-height: 5px; background-color: $bg_color; - background-image: image($borders_color), image($borders_color); + background-image: _solid($borders_color), _solid($borders_color); background-size: 1px 1px, 1px 1px; &:backdrop { background-color: $backdrop_bg_color; - background-image: image($backdrop_borders_color), - image($backdrop_borders_color); + background-image: _solid($backdrop_borders_color), + _solid($backdrop_borders_color); } } } diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index c6bd97a3c5..731b3a2aaa 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -8,6 +8,11 @@ @else { @return 0 1px $c; } } +@function _solid($c) { +// solid color image + @return linear-gradient(to bottom, $c); +} + @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { // // Helper function to stack up to 4 box-shadows; @@ -275,8 +280,8 @@ color: $tc; outline-color: transparentize($tc, 0.7); border-color: if($c!=$bg_color, _border_color($c), $borders_color); - @if $variant == 'light' { background-image: image(darken($c, 8%)); } - @else { background-image: image(darken($c, 6%)); } + @if $variant == 'light' { background-image: _solid(darken($c, 8%)); } + @else { background-image: _solid(darken($c, 6%)); } @include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge); @@ -293,7 +298,7 @@ border-color: if($c!=$bg_color, _border_color($c), $insensitive_borders_color); - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); text-shadow: none; -gtk-icon-shadow: none; // white with 0 alpha to avoid an ugly transition, since no color means @@ -327,7 +332,7 @@ label, & { color: if($tc!=$fg_color,mix($tc, $_bg, 80%), $backdrop_fg_color); } border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color); - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); text-shadow: none; -gtk-icon-shadow: none; @include _shadows(inset 0 1px transparentize(white, 1), @@ -344,7 +349,7 @@ label, & { color: if($tc!=$fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); } border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color); - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge); } @@ -360,7 +365,7 @@ label, & { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); } border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color); - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); text-shadow: none; -gtk-icon-shadow: none; // white with 0 alpha to avoid an ugly transition, since no color means @@ -381,7 +386,7 @@ label { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); } border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color); - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge); } @@ -395,7 +400,7 @@ color: $osd_fg_color; border-color: $osd_borders_color; - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); background-clip: padding-box; box-shadow: inset 0 1px transparentize(white, 0.9); text-shadow: 0 1px black; @@ -411,7 +416,7 @@ color: white; border-color: $osd_borders_color; - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); background-clip: padding-box; box-shadow: inset 0 1px transparentize(white, 0.9); text-shadow: 0 1px black; @@ -426,7 +431,7 @@ color: white; border-color: $osd_borders_color; - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); background-clip: padding-box; box-shadow: none; text-shadow: none; @@ -439,7 +444,7 @@ // color: $osd_insensitive_fg_color; border-color: $osd_borders_color; - background-image: linear-gradient(to bottom, $osd_insensitive_bg_color); + background-image: _solid($osd_insensitive_bg_color); background-clip: padding-box; box-shadow: none; text-shadow: none; @@ -454,7 +459,7 @@ color: $osd_fg_color; border-color: $osd_borders_color; - background-image: linear-gradient(to bottom, $_bg); + background-image: _solid($_bg); background-clip: padding-box; box-shadow: none; text-shadow: none; diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 333687a786..490a25c0bf 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -77,7 +77,7 @@ textview text { textview border { background-color: #313434; - background-image: image(rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); background-repeat: no-repeat; } textview border:backdrop { background-color: #333636; } @@ -469,7 +469,7 @@ button { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #212424; - background-image: image(#2a2f2f); + background-image: linear-gradient(to bottom, #2a2f2f); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; @@ -795,7 +795,7 @@ button.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #0f2b48; - background-image: image(#1b4e83); + background-image: linear-gradient(to bottom, #1b4e83); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -972,7 +972,7 @@ button.destructive-action { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #760909; - background-image: image(#b90e0e); + background-image: linear-gradient(to bottom, #b90e0e); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -1190,7 +1190,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #212424; - background-image: image(#2a2f2f); + background-image: linear-gradient(to bottom, #2a2f2f); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -1737,7 +1737,7 @@ headerbar { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #0f2b48; - background-image: image(#1b4e83); + background-image: linear-gradient(to bottom, #1b4e83); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -1866,7 +1866,7 @@ headerbar { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #212424; - background-image: image(#2a2f2f); + background-image: linear-gradient(to bottom, #2a2f2f); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; @@ -2765,7 +2765,7 @@ radio { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #212424; - background-image: image(#2a2f2f); + background-image: linear-gradient(to bottom, #2a2f2f); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -3500,7 +3500,7 @@ scale { min-height: 0; min-width: 0; } scale.color trough { - background-image: linear-gradient(to top, #212424); + background-image: linear-gradient(to bottom, #212424); background-repeat: no-repeat; } scale.color.horizontal { padding: 0 0 15px 0; } @@ -4030,7 +4030,7 @@ placessidebar row { placessidebar row.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; - background-image: image(#4e9a06); + background-image: linear-gradient(to bottom, #4e9a06); background-clip: content-box; } placessidebar row.sidebar-new-bookmark-row { color: #215d9c; } @@ -4062,21 +4062,21 @@ paned > separator { -gtk-icon-source: none; border-style: none; background-color: transparent; - background-image: image(#212424); + background-image: linear-gradient(to bottom, #212424); background-size: 1px 1px; } paned > separator:selected { - background-image: image(#215d9c); } + background-image: linear-gradient(to bottom, #215d9c); } paned > separator:backdrop { - background-image: image(#262929); } + background-image: linear-gradient(to bottom, #262929); } paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #393f3f; - background-image: image(#212424), image(#212424); + background-image: linear-gradient(to bottom, #212424), linear-gradient(to bottom, #212424); background-size: 1px 1px, 1px 1px; } paned > separator.wide:backdrop { background-color: #393f3f; - background-image: image(#262929), image(#262929); } + background-image: linear-gradient(to bottom, #262929), linear-gradient(to bottom, #262929); } paned.horizontal > separator { background-repeat: repeat-y; } paned.horizontal > separator:dir(ltr) { @@ -4151,7 +4151,7 @@ infobar { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #0f2b48; - background-image: image(#1b4e83); + background-image: linear-gradient(to bottom, #1b4e83); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index aa185cd422..2979e6f583 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -77,7 +77,7 @@ textview text { textview border { background-color: #f4f4f3; - background-image: image(rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); background-repeat: no-repeat; } textview border:backdrop { background-color: #f2f2f2; } @@ -469,7 +469,7 @@ button { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #b6b6b3; - background-image: image(#d4d4d2); + background-image: linear-gradient(to bottom, #d4d4d2); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; @@ -798,7 +798,7 @@ button.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #215d9c; - background-image: image(#2b7bcf); + background-image: linear-gradient(to bottom, #2b7bcf); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -975,7 +975,7 @@ button.destructive-action { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #a60c0c; - background-image: image(#df1111); + background-image: linear-gradient(to bottom, #df1111); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -1193,7 +1193,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #b6b6b3; - background-image: image(#d4d4d2); + background-image: linear-gradient(to bottom, #d4d4d2); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -1744,7 +1744,7 @@ headerbar { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #215d9c; - background-image: image(#2b7bcf); + background-image: linear-gradient(to bottom, #2b7bcf); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -1873,7 +1873,7 @@ headerbar { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #b6b6b3; - background-image: image(#d4d4d2); + background-image: linear-gradient(to bottom, #d4d4d2); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; @@ -2790,7 +2790,7 @@ radio { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #b6b6b3; - background-image: image(#d4d4d2); + background-image: linear-gradient(to bottom, #d4d4d2); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } @@ -3529,7 +3529,7 @@ scale { min-height: 0; min-width: 0; } scale.color trough { - background-image: linear-gradient(to top, #b6b6b3); + background-image: linear-gradient(to bottom, #b6b6b3); background-repeat: no-repeat; } scale.color.horizontal { padding: 0 0 15px 0; } @@ -4059,7 +4059,7 @@ placessidebar row { placessidebar row.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; - background-image: image(#4e9a06); + background-image: linear-gradient(to bottom, #4e9a06); background-clip: content-box; } placessidebar row.sidebar-new-bookmark-row { color: #4a90d9; } @@ -4091,21 +4091,21 @@ paned > separator { -gtk-icon-source: none; border-style: none; background-color: transparent; - background-image: image(#b6b6b3); + background-image: linear-gradient(to bottom, #b6b6b3); background-size: 1px 1px; } paned > separator:selected { - background-image: image(#4a90d9); } + background-image: linear-gradient(to bottom, #4a90d9); } paned > separator:backdrop { - background-image: image(#c0c0bd); } + background-image: linear-gradient(to bottom, #c0c0bd); } paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #e8e8e7; - background-image: image(#b6b6b3), image(#b6b6b3); + background-image: linear-gradient(to bottom, #b6b6b3), linear-gradient(to bottom, #b6b6b3); background-size: 1px 1px, 1px 1px; } paned > separator.wide:backdrop { background-color: #e8e8e7; - background-image: image(#c0c0bd), image(#c0c0bd); } + background-image: linear-gradient(to bottom, #c0c0bd), linear-gradient(to bottom, #c0c0bd); } paned.horizontal > separator { background-repeat: repeat-y; } paned.horizontal > separator:dir(ltr) { @@ -4180,7 +4180,7 @@ infobar { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #215d9c; - background-image: image(#2b7bcf); + background-image: linear-gradient(to bottom, #2b7bcf); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index b5a50e1fb6..dd5201c3fc 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -297,11 +297,11 @@ entry { &:not(:disabled) + entry:not(:disabled), &:not(:disabled) + %entry:not(:disabled) { border-top-color: mix($borders_color, $base_color, 30%); - background-image: linear-gradient(to bottom, $base_color); + background-image: _solid($base_color); &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - background-image: linear-gradient(to bottom, $backdrop_base_color); + background-image: _solid($backdrop_base_color); } } @@ -2781,7 +2781,7 @@ calendar { darken($bg_color,2%)); border-bottom-color: mix($borders_color,$bg_color,50%); &:backdrop { - background-image: linear-gradient(to bottom, $backdrop_bg_color); + background-image: _solid($backdrop_bg_color); border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%); } } @@ -2980,7 +2980,7 @@ placessidebar { &.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; - background-image: image($fg_color); + background-image: _solid($fg_color); background-clip: content-box; } @@ -3023,9 +3023,9 @@ paned { separator { min-width: 1px; min-height: 1px; - background-image: linear-gradient(to bottom, $borders_color); + background-image: _solid($borders_color); &:backdrop { - background-image: linear-gradient(to bottom, $backdrop_borders_color); + background-image: _solid($backdrop_borders_color); } } &:dir(ltr).horizontal separator { diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss index 8962706700..43b2de1607 100644 --- a/gtk/theme/HighContrast/_drawing.scss +++ b/gtk/theme/HighContrast/_drawing.scss @@ -6,6 +6,11 @@ @return 0 1px $c; } +@function _solid($c) { +// solid color image + @return linear-gradient(to bottom, $c); +} + @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { // // Helper function to stack up to 4 box-shadows; @@ -64,17 +69,17 @@ @if $t==insensitive { color: $insensitive_fg_color; border-color: $borders_color; - background-image: linear-gradient(to bottom, $insensitive_bg_color); + background-image: _solid($insensitive_bg_color); @include _shadows($_entry_edge); } @if $t==backdrop { color: $backdrop_fg_color; - background-image: linear-gradient(to bottom, $backdrop_base_color); + background-image: _solid($backdrop_base_color); box-shadow: 0 1px transparentize(white,1); } @if $t==backdrop-insensitive { color: $insensitive_fg_color; - background-image: linear-gradient(to bottom, $backdrop_bg_color); + background-image: _solid($backdrop_bg_color); box-shadow: 0 1px transparentize(white,1); } } diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css index 20dd85316c..f804156239 100644 --- a/gtk/theme/HighContrast/gtk-contained-inverse.css +++ b/gtk/theme/HighContrast/gtk-contained-inverse.css @@ -3094,7 +3094,7 @@ placessidebar row { placessidebar row.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; - background-image: image(#fff); + background-image: linear-gradient(to bottom, #fff); background-clip: content-box; } placessidebar row.sidebar-new-bookmark-row { color: #ddd; } diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css index 4e20846c82..fc4af7b451 100644 --- a/gtk/theme/HighContrast/gtk-contained.css +++ b/gtk/theme/HighContrast/gtk-contained.css @@ -3101,7 +3101,7 @@ placessidebar row { placessidebar row.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; - background-image: image(#000); + background-image: linear-gradient(to bottom, #000); background-clip: content-box; } placessidebar row.sidebar-new-bookmark-row { color: #000; } -- 2.30.2